<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div>
    <div class="mainStyle" v-loading="loading">
      <div class="treeDiv">
        <!-- <div class="treeTitle">结构化材料数据</div> -->
        <div class="treeStyle">
          <el-tree
            ref="materialTree"
            :data="treeData"
            node-key="nodeId"
            highlight-current
            :default-expanded-keys="[1,2,3]"
            :default-expand-all="true"
            :default-checked-keys="[0]"
            :current-node-key="0"
            icon-class="el-icon-arrow-right"
            @node-click="treeSelect"
          />
        </div>
      </div>
      <div class="rightDiv">
        <!-- <div id="myElement" style="width: 100%;height: calc(100vh - 84px)"></div> -->
        <VitTable />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, reactive } from 'vue';
import VitTable from "./vtable/index.vue";
//左侧数结构
let treeData = ref([{
    nodeId: "1",
    label: "结构CAE",
    nodeType: null,
    children: [{
      nodeId: "2",
      label: "C929",
      nodeType: null,
      children: [{
        nodeId: "3",
        label: "空机载荷",
        nodeType: null,
        children: []
      }]
    }]
}]);
const tableData = reactive([])

// *******************************  接口  *****************************


</script>
<style lang="scss" scoped>
.mainStyle {
  height: calc(100vh - 84px);
  display: flex;
}

.treeDiv {
  width: 250px;
  padding-top: 10px;
  height: calc(100vh - 84px);
  overflow: auto;
  border-right: 1px solid #dddddd7a;
}
.treeStyle {
  padding-top: 10px;
}
.treeTitle {
  padding-left: 10px;
}
.preview_tableStyle {
  margin-top: 10px;
}
.previewDiv,
.queryFormDiv {
  border: 1px solid #dddddd7a;
  padding: 20px;
  .queryBtn {
    padding-left: 120px;
  }
  .parameterLayout {
    span {
      display: inline-block;
      width: 80px;
      padding-left: 5px;
    }
  }
}
.rightDiv {
  flex: 1;
  overflow: auto;
  padding-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  height: calc(100vh - 84px);
}
@media (max-width: 1300px) {
  .previewDiv {
    .parameterLayout {
      :deep(.el-form-item--default .el-form-item__content) {
        width: auto;
      }
    }
  }
}
@media (max-width: 1300px) {
  :deep(.el-form-item--default .el-form-item__content) {
    width: 190px;
  }
  :deep(.el-form--inline .el-select) {
    width: 170px;
  }
  :deep(.el-form--inline .el-input) {
    width: 170px;
  }
}
@media (min-width: 1300px) {
  :deep(.el-form-item--default .el-form-item__content) {
    width: 260px;
  }
  :deep(.el-form--inline .el-select) {
    width: 240px;
  }
  :deep(.el-form--inline .el-input) {
    width: 240px;
  }
}
:deep(.el-form-item--default .el-form-item__label) {
  width: 120px;
  font-size: 12px;
  font-weight: normal;
}
:deep(.el-collapse .el-collapse-item__content) {
  padding: 0;
}
:deep(.el-table--default) {
  height: 100%;
}
:deep(.el-form--inline .el-form-item) {
  min-width: 370px;
  margin-right: 0;
}
:deep(.el-tree-node__label) {
    font-size: 12px;
    color: #606266;
  }
</style>
